Panda CSSを簡単に試してみる

面白そうだったのでPanda CSSを簡単に試してみることにした

Panda CSS？

ビルド時にCSSを生成するCSS-in-JSライブラリ

生成時に可読性を保ちつつ、パフォーマンスを向上させる形でCSSを吐き出す

共通しているスタイルを変数化したりしてくれる

型安全

詳しくはここ読んで

対象のプロジェクト

ノリで作って放置していた個人サイトをNext.js化したもの

今はVercel上で動かしている

Chrome dev toolsで比較してみる

Before

https://gyazo.com/f273bc6c3ad062b4be1ed177677a00ae

After

https://gyazo.com/d2ec27e285c7383d3aee88b2c46dae14

サマリ

ロードするCSSファイルの数が減っている（2->1）

もともとlayoutとpagesのCSSが別で吐かれていたのが、panda cssによって一つになったものと思われる

ファイルサイズはafterの方が大きい

panda cssだと使わないプロパティもデフォルトで吐き出されるらしい

ついでにmain-app-hogehoge.jsのサイズも減っている

これはCSS Modulesの記法からPanda CSSの記法に変わって数文字減ったせいかな

感想

ファイルサイズの観点では、高々1ページの個人サイトならサイズ的にはメリットない

CSS Modulesより体験がいいなと思った部分

エディタの補完がいいかんじに効く

型安全

Pseudo Propsの記法がシンプル

全然関係ないけどVercelすごい

無料で試せる分がかなり多い

Githubリポジトリからのビルドトリガー

過去のバージョンの再デプロイやロールバック

今回使ってないけど、Themeとかかなりいいんじゃないかと思う